<!doctype html>
<html>
<head>
<title>Facebook timeline using html and css only</title>
<style>
body{   
    background-color: #e7ebf2; font-family: arial; font-size: 12px;
}
header{
	margin:0 auto; width:780px;height:200px;border:1px solid #c3ccdf; border-bottom:3px solid #c3ccdf; border-radius:2px; background-color:#FFF; padding:10px;
}
time,.time{
    font-size: 10px; color:gray; border-bottom: 1px solid #E7EBF2; min-width:350px; height:20px; padding-bottom: 5px;
}
#timeline{
    width:800px; list-style-type: none; background: url(timeline.png) top center repeat-y; margin: 0 auto; padding:20px; margin-bottom:10px;
}

#timeline li{
    width:375px; -moz-border-radius:2px; border-radius:2px; webkit-border-radius:2px; border:1px solid #c3ccdf; padding:5px;background-color:#FFF;
}

#timeline li:nth-of-type(odd){
    clear: both;float:right; 
}

#timeline li:nth-of-type(odd), #timeline li:nth-of-type(even){
    margin:-10px 0 20px 0;
}
#timeline li:nth-of-type(even) .corner{
	position:absolute; display:block; margin-left:380px;width:20px;	height:15px;background:url(right.png);
}
#timeline li:nth-of-type(odd) .corner{
	position:absolute;display:block;margin-left:-25px;width:20px;height:15px;background:url(left.png);
}



</style>
</head>
<body>
<header>
 <h1>Dwi Susanto</h1>
 <p>My name is Dwi Susanto and I love any stuff related to web. Some time I confuse wether I love Programming > Design or Design > Programming. The name of this blog taken from my childhood name. If you have any question, don't hesitate to contact me here:

<ul><li>Email : tanto [at] kangtanto.com </li>
 <li>FB : www.facebook.com/kangtanto</li>
 <li>Twitter : www.twitter.com/kangtanto</li>
 </ul>

</p>
</header>
<ol id="timeline">

  <li> 
    <div class="time">Yesterday</div>
    <span class="corner"></span>
    <p>
just had a lunch ...</p>
  </li>

  <li>
    <div class="time">about an hour ago</div>
    <span class="corner"></span>
    <p>Information inside a table or a list needs to be displayed in such a way so it will be easier to read. Most of us will use the same method when we display information inside table or list. We usually choose two color for example grey and white and put them as background on each</p>
  </li>

  <li>
    <div class="time">Monday</div>
    <span class="corner"></span>
    <p>Have a nice hot chocolate in the morning</p>
  </li>

  <li>
    <div class="time">Yesterday</div>
    <span class="corner"></span>
    <p>HTML5 has become a hit today as its new elements and other new concept. What about the old elements? HTML5 has removed some old elements with some considerations. For example the presentational attribute such as background(for body element), bgcolor, align and border as they are better handled in CSS.
    </p>
  </li>

  <li>
    <div class="time">sunday</div>
    <span class="corner"></span>
    <p>Create HTML 5 And CSS3 Form<br/>
create a form using html 5 new elements and css new styles.<br/>
<a href="http://kangtanto.com/web-2/html5-web-2/create-html-5-and-css3-form">read more</a>
</p>
  </li>

  <li>
    <div class="time">Sunday</div>
    <span class="corner"></span>
    <p>Create a simple list using nth-of-type</p>
  </li>

  <li>
    <div class="time">Sunday</div>
    <span class="corner"></span>
    <p>There are many new stuff on HTML5. Can't wait to learn canvas</p>
  </li>

  <li>
    <div class="time">Sunday</div>
    <span class="corner"></span>
    <p>Better take a look at some example of best and fresh single
web page <a href='http://kangtanto.com/web-2/inspirations-10-best-and-fresh-single-page-website'>here</a></p>
  </li>

</ol>  
</body>
</html>
